<template>
  <div class="group-table-box">
    <Row class="group-top">
      <Col span="16" class="group-top">
        <div class="input-item input-flex">
          <span>问卷名称：</span>
          <Input v-model="form.groupName" placeholder="问卷名称" style="width: 100px;" />
        </div>

        <div class="input-item input-flex">
          <span>问卷分类：</span>
          <Input v-model="form.createName" placeholder="问卷分类" style="width: 100px;" />
        </div>

        <div class="input-item input-flex">
          <span>创建时间：</span>
          <DatePicker
            v-model="form.date"
            type="daterange"
            format="yyyy-MM-dd"
            confirm
            placement="bottom-start"
            placeholder="选择创建时间"
            style="width: 200px"
            @on-change="onClickDatePickerChange"
          ></DatePicker>
        </div>

        <div class="input-item">
          <Button type="info" class="input-btn" @click="onClickSearch">搜索</Button>
          <Button type="warning" class="input-btn" @click="onClickReset">重置搜索</Button>
        </div>
      </Col>

      <Col span="8" class="group-right">
        <div class="input-item" style="margin-right: 0;">
          <Button type="info" @click="clickAddModal">新增问卷</Button>
        </div>
      </Col>
    </Row>
    <div class="table-container">
      <Table
        border
        class="table-container-table"
        :columns="columns7"
        :data="tableData"
        :loading="isLoading"
      ></Table>
      <Page
        :total="totalPageCount"
        :current="form.pageIndex"
        :page-size="10"
        show-elevator
        class="table-container-page"
        @on-change="getTableData"
      />
    </div>

    <!-- 点击新增问卷 -->
    <Modal
      v-model="showAddModal"
      width="50"
      footer-hide
    >
      <div class="modal-container">
        <div class="btn-top">
          <Button type="primary" @click="addSingleQue">新增单选</Button>
          <Button type="primary" @click="addMultiQue">新增多选</Button>
          <Button type="primary" @click="addBlankQue">新增填空</Button>
        </div>
        <Form ref="formDynamic" :model="formDynamic">
          <!-- 单选 -->
          <FormItem
            v-for="(item, index) in formDynamic.single"
            :key="index"
          >
            <Row class="modal-row">
              <Col span="4" class="modal-label">
                <p>题目名称 {{ index + 1 }} </p>
                <p>（单选）</p>
              </Col>
              <Col span="12">
                <Input type="text" v-model="item.value" placeholder="请输入..."></Input>
              </Col>
              <Col span="8" offset="1" class="modal-btns">
                <Icon
                  type="ios-add-circle-outline"
                  @click="addSingleOption(index)"
                />
                <Icon
                  type="ios-remove-circle-outline"
                  @click="removeSingleOption(index)"
                />
                <Icon type="ios-trash-outline" @click="removeSingleQue(index)" />
              </Col>
            </Row>
            <Row
              class="modal-row"
              v-for="(itemOption, indexOption) in item.options"
              :key="indexOption"
            >
              <Col span="4" class="modal-label">
                <p>{{ itemOption.enIndex }} </p>
              </Col>
              <Col span="12">
                <Input type="text" v-model="indexOption.value" placeholder="请输入..."></Input>
              </Col>
            </Row>
          </FormItem>
          <!-- 多选 -->
          <FormItem
            v-for="(item, index) in formDynamic.multi"
            :key="index"
          >
            <Row class="modal-row">
              <Col span="4" class="modal-label">
                <p>题目名称 {{ index + 1 }} </p>
                <p>（多选）</p>
              </Col>
              <Col span="12">
                <Input type="text" v-model="item.value" placeholder="请输入..."></Input>
              </Col>
              <Col span="8" offset="1" class="modal-btns">
                <Icon
                  type="ios-add-circle-outline"
                  @click="addMultiOption(index)"
                />
                <Icon
                  type="ios-remove-circle-outline"
                  @click="removeMultiOption(index)"
                />
                <Icon type="ios-trash-outline" @click="removeMultiQue(index)" />
              </Col>
            </Row>
            <Row
              class="modal-row"
              v-for="(itemOption, indexOption) in item.options"
              :key="indexOption"
            >
              <Col span="4" class="modal-label">
                <p>{{ itemOption.enIndex }} </p>
              </Col>
              <Col span="12">
                <Input type="text" v-model="indexOption.value" placeholder="请输入..."></Input>
              </Col>
            </Row>
          </FormItem>
          <!-- 填空 -->
          <FormItem
            v-for="(item, index) in formDynamic.blank"
            :key="index"
          >
            <Row class="modal-row">
              <Col span="4" class="modal-label">
                <p>题目名称 {{ index + 1 }} </p>
                <p>（填空）</p>
              </Col>
              <Col span="12">
                <Input type="text" v-model="item.value" placeholder="请输入..."></Input>
              </Col>
              <Col span="8" offset="1" class="modal-btns">
                <Icon type="ios-trash-outline" @click="removeBlankQue(index)" />
              </Col>
            </Row>
          </FormItem>
        </Form>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickQuestionConfirm">完成</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showAddModal: false,
      isLoading: false,
      form: {
        pageIndex: 1,
      },
      totalPageCount: 10,
      columns7: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '问卷',
          key: 'groupName',
          align: 'center'
        },
        {
          title: '创建时间',
          width: 100,
          key: 'issueTime',
          align: 'center'
        },
        {
          title: '所属分类',
          key: 'userName',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  margin: '5px',
                  width: '70px'
                },
                on: {
                  click: () => {
                    this.delete(params.index)
                  }
                }
              }, '删除')
            ]);
          }
        }
      ],
      tableData: [{
        groupStatusText: '123123'
      }],
      checkReturnData: {
      },
      // quesIndex: 1,
      formDynamic: {
        single: [],
        multi: [],
        blank: []
      }
    }
  },
  mounted() {
    this.getTableData();
  },
  watch: {
  },
  methods: {
    onClickSearch() {

    },
    onClickReset() {

    },
    clickAddModal() {
      // 点击新增问卷
      this.formDynamic = {
        single: [],
        multi: [],
        blank: []
      }
      this.showAddModal = true
    },
    onClickDeleteConfirm() {

    },
    delete() {

    },
    check(index) {

    },
    addSingleQue() {
      // 点击添加单选问题
      // this.quesIndex ++
      this.formDynamic.single.push({
        value: '',
        // index: this.quesIndex,
        options: [{
          value: '',
          index: 0,
          enIndex: 'A'
        }]
      });
    },
    addMultiQue() {
      // 点击添加多选问题
      // this.quesIndex ++
      this.formDynamic.multi.push({
        value: '',
        // index: this.quesIndex,
        options: [{
          value: '',
          index: 0,
          enIndex: 'A'
        }]
      });
    },
    addBlankQue() {
      // 点击添加单选问题
      // this.quesIndex ++
      this.formDynamic.blank.push({
        value: ''
      });
    },
    removeSingleQue (index) {
      // 点击删除单选问题
      this.formDynamic.single = this.removeArr(this.formDynamic.single, index)
      this.formDynamic.single.push()
    },
    addSingleOption(index) {
      // 点击添加单选问题的选项
      let arr = this.formDynamic.single[index].options
      arr.push({
        value: '',
        index: arr.length + 1,
        enIndex: String.fromCharCode(65 + arr.length)
      });
      this.formDynamic.single[index].options = arr
      this.formDynamic.single.push()
    },
    removeSingleOption(index, optionIndex) {
      // 点击删除单选问题的选项
      let arr = this.formDynamic.single[index].options
      if(arr.length <= 1) {
        return
      }
      this.formDynamic.single[index].options = this.removeArr(arr, optionIndex)
      this.formDynamic.single.push()
    },
    removeMultiQue (index) {
      // 点击删除单选问题
      this.formDynamic.multi = this.removeArr(this.formDynamic.multi, index)
      this.formDynamic.multi.push()
    },
    addMultiOption(index) {
      // 点击添加单选问题的选项
      let arr = this.formDynamic.multi[index].options
      arr.push({
        value: '',
        index: arr.length + 1,
        enIndex: String.fromCharCode(65 + arr.length)
      });
      this.formDynamic.multi[index].options = arr
      this.formDynamic.multi.push()
    },
    removeMultiOption(index, optionIndex) {
      // 点击删除单选问题的选项
      let arr = this.formDynamic.multi[index].options
      if(arr.length <= 1) {
        return
      }
      this.formDynamic.multi[index].options = this.removeArr(arr, optionIndex)
      this.formDynamic.multi.push()
    },
    removeBlankQue (index) {
      // 点击删除单选问题
      this.formDynamic.blank = this.removeArr(this.formDynamic.blank, index)
      this.formDynamic.blank.push()
    },
    onClickQuestionConfirm() {
      // 新增问卷的确定按钮
    },
    getTableData(index) {

    },
    onClickDatePickerChange(e) {
      // ["2018-08-07", "2018-09-12"]
      // this.form.date = e;
    },
    removeArr(array, index) {
      if(index <= (array.length - 1)) {
        for(let i = index; i < array.length; i ++) {
          array[i] = array[i + 1]
          if(array[i]) {
            array[i].index = i + 1
          }
        }
      }
      array.length = array.length - 1
      // this.quesIndex = array.length
      return array;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input-flex {
  display: inline-flex !important;
  flex-direction: column;
}
.pull-right {
  float: right;
}
.group-table-box {
  padding: 20px;
}
.group-top {
  display: flex;
  align-items: flex-end;
}
.group-right {
  display: flex;
  justify-content: flex-end;
}
.input-item {
  display: inline-block;
  margin: 0 20px 20px 0;
  color: #000;
}
.input-btn {
  margin-right: 10px;
}
.table-container-page {
  text-align: center;
  margin-top: 20px;
  color: #000;
}
.modal-container {
  padding: 30px 30px 20px 30px;
}
.btn-top {
  margin-bottom: 20px;
}
.btn-top button {
  margin-right: 25px;
}
.modal-label {
  text-align: center;
  line-height: 20px;
}
.modal-row {
  display: flex;
  align-items: center;
}
.modal-btns i {
  font-size: 24px;
  margin-right: 4px;
  cursor: pointer;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  color: #fff;
  width: 100px;
}
</style>
